<template>
  <div id="app">
    <div id="pdfDom" class="checkMan">
      <div class="title">
        <h3>农村住房建设施工备案申请</h3>
        <h3 style="text-align: center; margin-top: 7px">承诺书</h3>
      </div>
      <pre>    本人申请在{{ XNAME }}{{ TOWNNAME }}{{ CUNNAME }}</pre>
      <pre>
    使用宅基地建设住房，已经知晓办理建筑工程施工备案证事项的各项要求，现就有关事项承诺如下：
    1.施工场地已经基本具备施工条件。
    2.有保证工程质量和安全的具体措施。严格落实质量安全主体责任，督促建筑施工企业（或者乡村建设工匠）规范使用脚手架、模板支撑系统及进行高处作业，施工现场配备灭火器和配电箱，接受乡镇政府（街道办事处）和住房城乡建设部门对施工质量安全实施监督检查，对安全隐患按照要求进行整改，依法组织工程验收。
    3.建设资金已经落实，不拖欠依法应当支付的工程款。
         </pre
      >
      <p style="text-align: right; margin-right: 60px; font-weight: 600; font-size: 18px">
        申请户主（签字）：
        <span @click="showPopup" v-if="!resultImg" style="width: 40px; height: 10px">点击签字</span>
        <img @click="showPopup" class="imgSrv" v-if="resultImg" :src="resultImg" alt />
      </p>
      <p style="text-align: right; margin-right: 120px; font-weight: 600; font-size: 18px">日期：{{ time }}</p>
    </div>
    <div>
      <van-cell v-show="false" @click="showPopup">点击签字</van-cell>
      <div style="width: 100vw; margin-bottom: 20px; display: flex; justify-content: center">
        <van-button class="button3" @click="showPopup">点击签字</van-button>
        <van-button class="button3" @click="handleCreateHtmlPdf" v-preventReClick="7000">提交</van-button>
      </div>

      <van-popup closeable v-model="show" style="height: 80%; width: 80%">
        <div class="bottom">
          <vue-esign ref="esign" width="800" :height="1700" class="mySign" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
        </div>
        <div class="dialog-footer">
          <van-button @click="handleReset" type="info">重签</van-button>
          <van-button @click="handleGenerate" type="info">确定</van-button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
/**
 * 施工场地已经基本具备施工条件的承诺书：6b824044-9162-476a-8d0a-85e0a09bff1c
 */
import PubSub from 'pubsub-js'
import Vue from 'vue'
import { base64toFile } from '@/common/FilePare'
import { preventReClick } from '@/utils/plugins'
import { dataTransFile,FileServerProxy } from '@/utils/api'
import { GJDBFunction2 } from '@/utils/queryData'
Vue.use(preventReClick)
export default {
  name: 'App',
  data() {
    return {
      dialogVisible: false, // 弹框是否开启
      HZ: '',
      CUNNAME: '',
      XNAME: '',
      TOWNNAME: '',
      lineWidth: 6, // 画笔的线条粗细
      lineColor: '#000000', // 画笔的颜色
      bgColor: '', // 画布的背景颜色
      resultImg: '', // 最终画布生成的base64图片
      isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
      time: '',
      //   heightE: '200',
      title: '改、 扩、翻建',
      title1: '杭州市临安区青山湖街道孝村村６组孝村２５－１号',
      data1: [],
      data2: '',
      formData: [],
      isShowValue: true,
      show: false,
      FJData:[]
    }
  },
  methods: {
    // 清空画板
    handleReset() {
      this.$refs.esign.reset()
      this.isShowValue = false
    },
    showPopup() {
      this.show = true
      //    setTimeout(() => {
      //   this.isShowValue = false
      // }, 1500)
    },
    //获取文件
    getFile1: async function () {
      let me = this
      let groupGuid = '6b824044-9162-476a-8d0a-85e0a09bff1c'
      let params = {
        accessCode: '1fdcbce42c6d4748a020feba618d54b8',
        cityCode: window.localStorage.getItem('citycodeChange'),
        params: {
          groupGuid: groupGuid,
          toRowGuid: JSON.parse(window.sessionStorage.getItem('fileData')).ROW_GUID
        }
      }
      const res1 = await FileServerProxy(params)
      let ress = JSON.parse(res1.data.data)
      if (ress.FilesInfo && ress.FilesInfo.length > 0) {
        this.FJData = ress.FilesInfo
      }
    },
    delectFile: async function (file) {
      debugger
      let fileguid = ''
      if (file.ROW_GUID) {
        fileguid = file.ROW_GUID
      }
      if (fileguid) {
        let params = {
          accessCode: 'ce9b691634de4ebca68dc5bb638d07f4',
          cityCode: window.localStorage.getItem("citycodeChange"),
          params: {
            fileGuid: fileguid,
          },
        }
        const res = await FileServerProxy(params)
      }
      return false;
    },
    handle() {},
    // 生成签字图
    handleGenerate() {
      this.$refs.esign
        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
        .then((res) => {
          this.resultImg = res
        })
        .catch((err) => {
          // 画布没有签字时会执行这里提示一下
        })
      // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
      // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
      this.show = false
    },
    DownloadPhoto(file) {
      console.log(this, 'sjdbhfu')
      if(this.FJData.length > 0 ){
        this.FJData.forEach(item=>{
            this.delectFile(item)
        })
      }
      this.getPdfto('pdfDom', '建筑工程施工备案承诺书.png')
    },
    async changeoled() {
      let ROW_GUID = JSON.parse(window.sessionStorage.getItem('fileData')).ROW_GUID
      const res = await GJDBFunction2('up_sgxkjd', [{ I_ROW_GUID: ROW_GUID, I_TYPE: 2 }])
    },
    //先使用插件生成图片
    handleCreateHtmlPdf() {
      debugger
      //重新设置citycode
      this.changeoled()
      setTimeout(() => {
        if (this.resultImg == '') {
          this.$toast.fail('请签名!')
        } else {
          setTimeout(() => {
            // const file = base64toFile(this.resultImg, '建筑工程施工备案承诺书')
            //上传文件
            this.DownloadPhoto()
          }, 200)
        }
      }, 500)
    }
  },
  mounted() {
    setTimeout(() => {
      this.isShowValue = false
    }, 1500)
    debugger
    //this.HZ = JSON.parse(window.sessionStorage.getItem('fileData')).HOUSEAPPLICANT
    this.TOWNNAME = JSON.parse(window.sessionStorage.getItem('fileData')).TOWNNAME
    this.XNAME = JSON.parse(window.sessionStorage.getItem('fileData')).XNAME
    this.CUNNAME = JSON.parse(window.sessionStorage.getItem('fileData')).CUNNAME
    // this.data1 = this.$route.query.data2
    this.data2 = this.$route.query.data1
    this.formData = this.$route.query.formData
    this.getFile1()
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        title: '签订承诺书'
      })
        .then((res) => {})
        .catch((err) => {})
    }
  },
  created() {
    var date = new Date()
    this.time = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日' //表示当前日期
  }
}
</script>

<style lang="scss" scoped>
#app {
  font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
  height: 96vh;
  position: relative;
  -webkit-text-size-adjust: none;
  font-size: 16px;
  overflow: auto;

  .spanStyle {
    text-decoration: underline;
  }

  pre {
    white-space: pre-wrap;
    /*css-3*/
    white-space: -moz-pre-wrap;
    /*Mozilla,since1999*/
    white-space: -pre-wrap;
    /*Opera4-6*/
    white-space: -o-pre-wrap;
    /*Opera7*/
    word-wrap: break-word;
    line-height: 22px;
  }

  .checkMan {
    // border: 1px solid #e9e9e9;
    padding-top: 4px;
    padding: 10px;

    .title {
      text-align: center;
    }

    h2 {
      margin-bottom: 20px;
    }

    .el-button {
      margin-bottom: 20px;
    }

    img {
      width: 15%;
      //   height: 80px;
    }
  }

  .imgSrv {
    margin-left: 20px;
    transform: rotate(270deg);
  }

  .button2 {
    width: 50%;
    background: #007aff;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    // margin: 0 10px;
  }

  .button3 {
    width: 50%;
    background: #007aff;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    margin: 0 10px;
  }

  .bottom {
    position: absolute;
  }

  .dialog-footer {
    position: relative;
    left: 38px;
    top: 37%;
    transform-origin: left 50%;
    transform: rotate(90deg);
  }
}

.el-dialog__body {
  // 设置一下签字区域的虚线边框
  .mySign {
    border: 1px dashed #000;
  }
}
</style>
